<template>
  <div class="post-list">
    <!-- 🔍 搜索框区域 -->
    <div class="search-bar">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索帖子标题或内容"
        clearable
      />
    </div>

    <!-- 帖子列表 -->
    <PostCard
      v-for="post in filteredPosts"
      :key="post.knowledgeId"
      :post="post"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import PostCard from '@/components/PostCard.vue'

const props = defineProps<{
  posts: any[]
  selectedTypeId: number | null
  postType?: 'NORMAL' | 'QUESTION' | 'USER'
  userId?: number
}>()


const searchKeyword = ref('')

const filteredPosts = computed(() => {
  return props.posts.filter(post => {
    const matchesType =
      props.selectedTypeId === null ||
      (post.typeId & props.selectedTypeId) !== 0

    const matchesKeyword =
      !searchKeyword.value ||
      post.title.includes(searchKeyword.value) ||
      post.content.includes(searchKeyword.value)

    const matchesPostType =
      !props.postType || post.postType === props.postType

    const matchesUser =
      props.userId === undefined || post.userId === props.userId

    return matchesType && matchesKeyword && matchesPostType && matchesUser
  })
})

</script>

<style scoped>
.post-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-bar {
  margin-bottom: 10px;
  max-width: 400px;
}
</style>
